<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>边栏滚动到满屏后固定</title>
</head>
<style type="text/css">
	*{
		margin:0;
		padding:0;
	}
	.div1{
		width:500px;height:2200px;float:left;background-color:red
	}
	.div2{
		width:400px;height:2200px;float:right;
	}
	#J_BdSide{
		height:400px;background-color:blue;
	}
</style>
<body>
	<div class="div1"></div>
	<div class="div2">
		<div style="height:300px;background-color:green;"></div>
		<div id="J_BdSide"></div>
	</div>
</body>
<script>
			var $ = function(id){
				return document.getElementById(id);
			}

			var addEvent = function(obj,event,fn){
                if(obj.addEventListener){
                	obj.addEventListener(event,fn,false);
                }else if(obj.attachEvent){
                	obj.attachEvent('on'+event,fn);
                }
			}
			var domSider = $('J_BdSide');
			var scrollEvent = function(){
				var sideHeight = domSider.offsetHeight;
				var sideToTop = domSider.offsetTop;
				console.log(sideHeight);
				var scrollHeight = document.documentElement.scrollTop||document.body.scrollTop;
				console.log(scrollHeight);
				if(scrollHeight>sideToTop){
					domSider.style.cssText = 'position:fixed;right:0px;width:400px;background-color:#ccc;top:0px;';
				}else{
					domSider.style.position='static';
				}
			}
			addEvent(window,'scroll',function(){
				scrollEvent();
				
			});
			addEvent(window,'resize',function(){
				scrollEvent();
			});
		</script>
</html>